<template>
    <div class="context">
        <div class="top">
            <div class="title">
                <span class="top-title">告警与故障统计:</span>
                <span class="top-title-unit">(单位：%)</span>
            </div>
            <ul class="fault-list">
                <li v-for="item in faultList" :key="item.name" class="fault-list">
                    <span :style="{
                      backgroundColor : item.color
                  }" class="fault-color"></span>
                    <span class="fault-title">{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="chart-pie">
            <!--报警分类-->
            <div class="pie" id="alarm_classification"></div>
            <!-- 故障占比 -->
            <div class="pie" id="fault_proportion"></div>
        </div>

    </div>
</template>
<script>
import FaultPie from '../assets/js/FaultPie';

let alarm, fault;
// 故障统计
/**
 * faultList: array name,color
 */
export default {
    name: 'FaultTotal',
    props: {
        faultList: Array
    },
    mounted() {
        this.$nextTick(function() {
            //报警分类
            alarm = new FaultPie({
                el: document.getElementById('alarm_classification')
            });
            alarm.setData({
                title: '报警分类',
                titleColor: '#0482BE',
                titleSize: 0.24,
                list: this.faultList
            });

            //故障统计
            fault = new FaultPie({
                el: document.getElementById('fault_proportion')
            });
            fault.setData({
                title: '故障统计',
                titleColor: '#0482BE',
                titleSize: 0.25,
                list: this.faultList.map(t => {
                    return {
                        name: t.name,
                        color: t.color,
                        value: t.faultValue
                    };
                })
            });
        });
    }
};
</script>
<style scoped>
.context {
    width: 100%;
    height: 100%;
}
.top {
    /* padding-top: 0.3rem; */
    /* padding-left: 0.3rem; */
    /* display: flex;
  align-items: center;
  flex-flow: row wrap; */
    height: 30%;
}
.title {
    padding-top: 0.2rem;
    padding-left: 0.2rem;
    height: 15%;
}
.top-title {
    font-weight: bold;
}
.top-title-unit {
    font-size: 0.28rem;
}
.fault-list {
    display: flex;
    flex-flow: row nowrap;
    font-size: 0.3rem;
    align-items: center;
    height: 15%;
    padding-top: 0.13rem;
}
.fault-item {
    display: flex;
    align-items: center;
}
.fault-color {
    display: inline-block;
    width: 0.17rem;
    height: 0.4rem;
    border-radius: 30%;
    border: 0.01rem solid #000000;
    background-color: red;
    margin-right: 0.1rem;
}
.fault-title {
    margin-right: 0.2rem;
}
.chart-pie {
    width: 100%;
    height: 70%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.pie {
    width: 45%;
    height: 85%;
    background-color: #142d3a;
    border-radius: 50%;
}
</style>
